<template>
  <div class="homeDiv">
    <picture class="logo-box">
      <img src="https://cdn.jsdelivr.net/gh/shangzhenyang/assets/img/ap-main-logo-2.png" alt="">
    </picture>

    <div id="main-box" class="main-box">
      <button id="send" class="main-btn" @click="handerViewLive()">观看直播</button>
      <button id="receive" class="main-btn" @click="openLiveDialogVisible = true">我要直播</button>
      <button id="receive" class="main-btn" @click="liveInfoDialogVisible = true">我的直播间</button>
    </div>
    <el-dialog
      title="是否确认开通直播服务"
      :visible.sync="openLiveDialogVisible"
      width="30%"
      center>
      <label>直播房间名：</label>
      <el-input placeholder="请输入直播房间名" size="small" v-model="playRoomName" class="playRoomName" />
        
      <span slot="footer" class="dialog-footer">
        <el-button @click="openLiveDialogVisible = false">取 消</el-button>
        <el-button type="success" @click="openLiveDialogVisible = false">确 定 开 通</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="我的直播间"
      :visible.sync="liveInfoDialogVisible"
      width="20%"
      center>
      <label>直播间名称：</label>xxx<p/>
      <label>推流地址：</label>xxx<p/>
      <label>推流密码：</label>xxx<p/>
      <label>直播间状态：</label>xxx<p/>
      <label>直播间人数：</label>xxx<p/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="liveInfoDialogVisible = false">取 消</el-button>
        <el-button type="success" @click="liveInfoDialogVisible = false">开 始 直 播</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: "Home",
  data() {
    return {
      openLiveDialogVisible: false,
      liveInfoDialogVisible: false,
      codeUrl: "",
      redirect: undefined,
      playRoomName:''
    };
  },

  methods: {
    handerViewLive(){
      //路由跳转
      this.$router.push({ path: '/' + "liveList"})
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .playRoomName{
    width: 70%
  }
  .homeDiv{
    background-color: #fafafa;
    color: black;
    cursor: default;
    font-family: pingfang sc,microsoft yahei,sans-serif;
    height: 100%;
    overflow: hidden;
    margin: 0;
    max-width: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    transition: background-color .25s;
    -webkit-user-select: none;
    user-select: none;
  }
  .logo-box{
    height: 200px;
    left: calc(50% - 175px);
    position: absolute;
    top: calc(50% - 200px);
    width: 350px;
    img{
      height: 100%;
    }

  }
  .main-box{
    margin: 0 calc(50% - 112px);
    position: absolute;
    top: 60%;
    transition: opacity .25s;
    width: 224px;
    z-index: 1;
  }
  .main-btn{
    border-radius: 10px;
    cursor: pointer;
    display: block;
    font-size: 13.3px;
    height: 49px;
    margin-bottom: 20px;
    transition: background-color .25s,box-shadow .25s,color .25s,opacity .25s;
    width: 100%;
  }
  #send{
    background-color: #4191f5;
    border: none;
    box-shadow: 0px 5px 20px rgba(65,145,245,0.5);
    color: #fff;
  }
  #receive{
    background-color:white;
    border: none;
    box-shadow: 0px 5px 20px rgba(65,145,245,0.2);
    color: #4191f5;
  }
</style>
